<template>
  <view class="page custom-page">
    <custom-head gradient back title="学校管理">
      <view class="tool" slot="right">
        <!-- <i class="iconfont icon-fenlei fenlei"></i> -->
      </view>
    </custom-head>
    <view class="search flex a-center">
      <view class="search-input">
        <i class="iconfont icon-sousuo1"></i>
        <input type="search" confirm-type="search" placeholder="请输入学校" v-model="name" />
      </view>
      <view class="submit" @click="handleSearch">搜索</view>
    </view>
    <view class="student">

      <!-- <scroll-view :scroll-y="true" :scroll-top="scrollTop"  @scrolltolower="bottomOut" style="height: 100%;"> -->
      <scroll-view :scroll-y="true" :scroll-top="scrollTop" style="height: 100%;">

        <u-index-list v-if="indexList.length > 0"  class="bao_1"  :scrollTop="scrollTop" :sticky="false" :index-list="indexList">
          <view v-for="(item, index) in indexList" :key="index">
            <u-index-anchor :index="item" />
            <view class="student-item flex a-center" v-for="school in schoolList[item]" @click="handleJumpEdit(school)">
              <view class="touxiang">
                <image :src="school.avatar" mode="widthFix" />
              </view>
              <view class="info">
                <view class="title">{{ school.name }} </view>
                <view class="text flex a-center">
                  <span>{{ school.head }}</span>
                </view>
              </view>
            </view>
          </view>
        </u-index-list>
      
        <view v-else class="noData">暂无数据</view>
      
      </scroll-view>
      


      <view class="submit-box flex a-center j-center">
        <view class="addStudent submit" @click="enterAdd()">添加学校信息</view>
      </view>

      <!-- <u-action-sheet cancelText="取消" :list="list" v-model="show" @click="enterPage"></u-action-sheet> -->
    </view>
  </view>
</template>
<script>
import { getSchool } from '../../api/modules/school'
import { textToPy, pinyinSort } from '../../utils/index'

export default {
  data() {
    return {
      name: '',
      scrollTop: 0,
      // show: false,
      // list: [
      //   { text: '添加学校信息', path: '/pages/school/addition' },
      //   { text: '批量添加学校信息', path: '/pages/school/batchAddition' }
      // ],
      indexList: [],
      schoolList: [],
      initSchoolList: [],  // 获取接口返回的初始数据
      page_no:1 ,  // 默认加载第一页
      page_size:20 ,  // 每页加载 20条数据
      total: 0, // 一共有多少条数据 
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },

  onShow() {  // 页面显示就会执行这个函数
    // console.log('我这个页面显示就会执行', this.schoolList.length);
    this.page_no = 1;
    this._getSchool({
      page_no: 1,
      page_size: 10000, 
    })
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop - 114
  },

  methods: {
    // bottomOut() {
    //   if (this.page_no < Math.ceil(this.total / this.page_size)) {
    //     this.page_no+=1;
    //     getSchool({
    //       page_no: this.page_no,
    //       page_size: 20
    //     }).then((res) => {
    //       const { code, data } = res || {}
    //       console.log('-0-0-0-0-0')
    //       if (code === 200) {
    //         const list = ([] && data.list).map((item) => ({ ...item, pname: textToPy(item.name), avatar: `${this.static_uri}${item.avatar}` }));
    //         this.initSchoolList.push(...list)
    //         const tempArr = pinyinSort(this.initSchoolList)
    //         this.schoolList = tempArr;
    //         this.indexList = Object.keys(tempArr);
    //       }
    //     })

    //   }
    // },
    handleJumpEdit({id}) {
      uni.navigateTo({
        url: `/pages/school/addition?id=${id}`
      })
    },
    enter(path) {
      uni.navigateTo({
        url: path
      })
    },

    enterAdd() {
      uni.navigateTo({
        url: '/pages/school/addition'
      })
    },

    enterPage(e) {
      var path = this.list[e].path
      uni.navigateTo({
        url: path
      })
    },

    handleSearch() {
      this._getSchool({ 
        name: this.name,
      })
    },

    _getSchool(data) {
      getSchool(data).then((res) => {
        const list = res.data.list.map((item) => ({ ...item, pname: textToPy(item.name), avatar: `${this.static_uri}${item.avatar}` })).filter(i => i.id === this.glbId)
        this.initSchoolList = list;
        const tempArr = pinyinSort(list)

        this.schoolList = tempArr
        // .filter(i => i.id === this.glbId)
        this.indexList = Object.keys(tempArr)
        this.total = res.data.total;
      })
    }
  }
}
</script>
<style scoped lang="scss">
.fenlei {
  color: #fff;
  font-size: 50rpx;
}

.page {
  height: 100vh;
  background-color: #fff;
}

.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120rpx;
  width: 100%;
}

.student {
  background-color: #fff;
  position: relative;
  padding-bottom: 100rpx;
  margin-top: 114rpx;
  height: calc(100% - 114rpx);
}

.bao_1 {
  height: 100%;
}

.search {
  width: 100%;
  height: 114rpx;
  background-color: #f3f4f5;
  padding: 25rpx 30rpx;
  position: fixed;
  top: calc(44px + var(--status-bar-height));
  z-index: 2;
  left: 0;

  .submit {
    font-size: 24rpx;
    color: #303133;
    padding: 0 30rpx;
    line-height: 64rpx;
  }
}

.search-input {
  flex: 1;
  background-color: #fff;
  height: 64rpx;
  border-radius: 32rpx;
  position: relative;

  input {
    font-size: 24rpx;
    color: #666;
    line-height: 64rpx;
    outline: none;
    background: none;
    height: 64rpx;
    padding-left: 60rpx;
  }

  i {
    position: absolute;
    left: 15rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36rpx;
    color: #8f9399;
  }
}

.studentList {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.student-item {
  width: 100%;
  padding: 20rpx 20rpx;

  .touxiang {
    width: 120rpx !important;
    height: 120rpx !important;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }

  .touxiang image {
    width: 100%;
    height: 100%;
  }

  .info {
    flex: 1;

    .title {
      font-size: 32rpx;
      color: #303133;
      margin-bottom: 10rpx;
    }

    .title span {
      font-size: 24rpx;
    }

    .text {
      font-size: 24rpx;
      color: #303133;
    }

    .integral {
      margin-left: 65rpx;
      color: #2979ff;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}
.submit-box {
  position: fixed;
  height: 100rpx;
  background-color: #fff;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 8;
}
.addStudent {
  width: 686rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
}
</style>
